import React, {useEffect, useState} from 'react';
import store from "@/components/17- redux仓库/01- redux/store.js";
import {remoCar} from "@/components/17- redux仓库/01- redux/carSlice.js"
import {addGoods} from "@/components/17- redux仓库/01- redux/goodsSlice";
import useRenderHooks from "@/components/17- redux仓库/01- redux/hooks.js";

const App = () => {
    const {goodsSlice, carSlice} = store.getState()
    /**
     * 02- useRenderHooks 用来监听仓库数据的变化 从而更新视图
     *     const count = useRenderHooks(state => state);
     */
    return (
        <div>
            <h3>APP页面</h3>
            <h4>商品</h4>
            <button onClick={() => {
                // 01- 此时添加商品 仓库的数据发生了变化 但是视图没有更新 解决看 02
                store.dispatch(addGoods({
                    id: Math.random().toString(36).slice(2),
                    name: '苹果',
                    num: 1
                }))
                // console.log("视图没有更新", store.getState())
            }}>添加商品
            </button>
            {
                goodsSlice.goodsList.map(item => (
                    <div key={item.id}>
                        <div>id : {item.id}</div>
                        <div>商品名称 : {item.name}</div>
                        <div>商品数量 : {item.num}</div>
                        <hr/>
                    </div>
                ))
            }

            <h4>购物车</h4>
            {
                carSlice.carList.map(item => (
                    <div key={item.id}>
                        <div>商品名称 : {item.name}</div>
                        <div>商品数量 : {item.num}</div>
                        <button onClick={() => {
                            store.dispatch(remoCar(item.id))
                            console.log("store", store.getState())
                        }}>删除
                        </button>
                        <hr/>
                    </div>
                ))
            }
        </div>
    );
};

export default App;